// JavaScript Document
//需要touch的相关支撑
((function(a){
    //插件本体
    var kuoqimap = function(opts){
        var ths = this;
        if(!a.kuoqiJs.plugIn.Touch){
            a.kuoqiJs.error("请使用前置扩展Touch以使用本功能");return;
        }
        this.opts = a.kuoqiJs.opts(opts,{
            type:"complete",//地图分为完整版地图与简单版地图，简单版地图是直接加载完图片进行一个地图展示
            box:document.getElementsByTagName("body"),
            w:10000,//地图宽度信息
            h:10000,//地图高度信息
            x:0,//x轴信息
            y:0,//y轴信息
            scale:1,//缩放比例
            img:'',//图片的路径信息
            bg_color:"#000",
        },"box");
        this.x = this.opts.x;
        this.y = this.opts.y;
        this.w = this.opts.w;
        this.h = this.opts.h;
        this.s_w = 1;//svg现实的宽度
        this.s_h = 1;//svg显示的高度
        this.w_w = 1;//window显示窗口的理论尺寸
        this.w_h = 1;//window窗口显示的理论尺寸
        this.scale = this.opts.scale;//缩放比例
        //重置目标位置信息
        this.syncPosition = function(){
            if(ths.x >ths.w_w / 2){
                ths.x = ths.w_w / 2;
            }
            if(ths.y>ths.w_h / 2){
                ths.y = ths.w_h / 2;
            }
            if(ths.w*ths.scale + ths.x  <ths.w_w / 2){
                ths.x = ths.w_w / 2 - ths.w * ths.scale;
            }
            if(ths.h*ths.scale + ths.y  <ths.w_h / 2){
                ths.y = ths.w_h / 2 - ths.h * ths.scale;
            }

            //做一个x,y为相对真实图片的屏幕左上角的位置的一个点的信息
            var x = (ths.scale - 1) * ths.w / 2 + ths.x;
            var y = (ths.scale - 1) * ths.h / 2 + ths.y;
            this.win.css({
                "transform":"matrix("+this.scale+",0,0,"+this.scale+","+x+","+y+")",
            });
        }


        this.preload = function(cfg){

        }
        //设置手动设置缩放倍率
        this.setScale = function(scale){


            //map.win.css("height","");
        }


        //创建一个图片
        this.Image = function(opts){
            this.opts = a.kuoqiJs.opts(opts,{
                cx:0,
                cy:0,
                url:"",
                width:"",
                height:"",
                visible:'visible',
                transform:""
            },'');
            this.element = document.createElementNS('http://www.w3.org/2000/svg','image');
            this.element.setAttributeNS(null,"width",this.opts.width);
            this.element.setAttributeNS(null,"height",this.opts.height);
            this.element.setAttributeNS(null,"href",this.opts.url);
            this.element.setAttributeNS(null,"x",this.opts.cx);
            this.element.setAttributeNS(null,"y",this.opts.cy);
            this.element.setAttributeNS(null,"visibility",this.opts.visible);
            this.element.setAttributeNS(null,"transform",this.opts.transform);
            this.toElement = function(){ return this.element;};
        };



        this.sync = function(){
            var ths = this;
            this.map = document.createElementNS('http://www.w3.org/2000/svg','svg');
            this.map.setAttribute("width",this.w);
            this.map.setAttribute("height",this.h);
            this.w_w = this.s_w = a.kuoqiJs(this.opts.box).width();
            this.w_h = this.s_h = a.kuoqiJs(this.opts.box).height();
            this.ele = a.kuoqiJs("<div></div>");
            this.win = a.kuoqiJs("<div></div>");
            this.ele.css({
                "position":"relative",
                "width":"100%",
                "height":"100%",
                "overflow":"hidden",
                "background-color":map.opts.bg_color
            });
            this.win.css({
                "position":"relative",
                "width":this.opts.w+"px",
                "height":this.opts.h+"px",
                "overflow":"hidden",
                "transition":"all 0.2s ease 0s"
            });
            //transform:scale(1.1,1.1)
            //this.map.setAttribute("transform","scale("+this.scale+","+this.scale+")");
            this.win.append(a.kuoqiJs(this.map));
            this.ele.append(this.win);
            a.kuoqiJs(this.opts.box).append(this.ele);
            //生成图片的信息
            this.bgimg = new this.Image({
                cx:0,
                cy:0,
                url:this.opts.img,
                width:this.opts.w,
                height:this.opts.h
            });
            this.map.appendChild(this.bgimg.toElement());
            this.touch = new a.kuoqiJs.plugIn.Touch({
                element:this.ele,
            });
            //写出相关的移动的数据信息
            this.touch.onMove = function(evt){
                ths.x +=  evt.dx;//这个移动的是屏幕尺寸
                ths.y +=  evt.dy;//这个移动的是屏幕尺寸
                ths.syncPosition();//重置位置信息
            }
            //缩放相关的方程式/
            this.touch.onZoom = function(evt){
                var scale = ths.scale;//这是老的缩放比例
                //这是新的缩放比例
                //ths.scale = ths.scale * evt.dst / evt.src;
                ths.scale = ths.scale * Math.sqrt(evt.dst / evt.src);
                //默认已经相对于左上角保持不变了，现在只要相对于某个具体的点保持不变的算法
                //相对于屏幕的实际距离乘以放大的倍率为实际放大的长度
                //减去ths.x作为总长度的概念
                //使用缩放比例变更为新的总长度
                //在新长度的基础上，使用点信息
                //对放大缩小的差额值进行补充
                ths.x = evt.dst_cx * ths.scale - (evt.dst_cx * scale - ths.x)/scale * ths.scale;
                ths.y = evt.dst_cy * ths.scale - (evt.dst_cy * scale - ths.y)/scale * ths.scale;
                //pcx/ths.scale - ths.x
                ths.syncPosition();//重置位置信息
            }
            this.touch.preload();
            //地图的点的点击事件
            map.map.addEventListener("click",function(evt){
                ths.click(evt);
            });
        }
		//使用一个图片作为点的信息
		this.Pointimg = function(opts){
			var ths = this;
            this.opts = a.kuoqiJs.opts(opts,{
				loc:[0,0],
				url:"",
				w:30,
				h:30,
				visible:'visible',
				transform:""
				},'');
			this.loc = this.opts.loc;
            this.type = "point";
            this.onClick = this.opts.click;
			this.element = document.createElementNS('http://www.w3.org/2000/svg','image');
			this.element.setAttributeNS(null,"width",this.opts.w);
			this.element.setAttributeNS(null,"height",this.opts.h);
			this.element.setAttributeNS(null,"href",this.opts.url);
			this.element.setAttributeNS(null,"x",this.opts.loc[0] - this.opts.w / 2);
			this.element.setAttributeNS(null,"y",this.opts.loc[1] - this.opts.h / 2);
			this.element.setAttributeNS(null,"visibility",this.opts.visible);
			this.element.setAttributeNS(null,"transform",this.opts.transform);
			//注册关于元素的动画
            this.animation = function(animation){
                this.element.appendChild(animation.toElement());
            };
            //双击点的位置显示点到最中间的位置并展示描述
            //document.addEventListener("click"
            this.element.addEventListener("click",function(e){
                ths.onClick&&ths.onClick(e);
                if(e.stopPropagation){
                    e.stopPropagation();
                }else if(window.event) {
                    window.event.cancelBubble = true;
                }
            });
            //输出元素信息
            this.toElement = function(){
                return this.element;
            }
            this.show = function(){
                map.map.append(this.toElement());
            }
            map.library.point.push(this);
		}
        //使用一个方形的盒子作为点
        this.Pointbox = function(opts){
            var ths = this;
            this.opts = a.kuoqiJs.opts(opts,{
                loc:[0,0],
                w:20,
                h:10,
                rx:2,//x的圆角
                ry:2,//y的圆角
                type:'',
                stroke:'black',
                strokeWidth:2,
                fill:"white",
                click:null,//点击事件的相关操作
            },'loc');
            this.loc = this.opts.loc;
            this.type = "point";
            this.onClick = this.opts.click;
            this.element = document.createElementNS('http://www.w3.org/2000/svg','rect');
            //this.element = document.createElementNS('http://www.w3.org/2000/svg','circle');
            this.element.setAttributeNS(null,"x",this.opts.loc[0] - this.opts.w/2);
            this.element.setAttributeNS(null,"y",this.opts.loc[1] - this.opts.h/2);
            this.element.setAttributeNS(null,"rx",this.opts.rx);
            this.element.setAttributeNS(null,"ry",this.opts.ry);
            this.element.setAttributeNS(null,"width",this.opts.w);
            this.element.setAttributeNS(null,"height",this.opts.h);
            this.element.setAttributeNS(null,"stroke",this.opts.stroke);
            this.element.setAttributeNS(null,"stroke-width",this.opts.strokeWidth);
            this.element.setAttributeNS(null,"fill",this.opts.fill);
            //注册关于元素的动画
            this.animation = function(animation){
                this.element.appendChild(animation.toElement());
            };
            //双击点的位置显示点到最中间的位置并展示描述
            //document.addEventListener("click"
            this.element.addEventListener("click",function(e){
                ths.onClick&&ths.onClick(e);
                if(e.stopPropagation){
                    e.stopPropagation();
                }else if(window.event) {
                    window.event.cancelBubble = true;
                }
            });
            //输出元素信息
            this.toElement = function(){
                return this.element;
            }
            this.show = function(){
                map.map.append(this.toElement());
            }
            map.library.point.push(this);
        }
        this.Point = function(opts){
            var ths = this;
            this.opts = a.kuoqiJs.opts(opts,{
                loc:[0,0],
                r:'10',
                stroke:'black',
                strokeWidth:2,
                fill:"red",
                click:null,//点击事件的相关操作
            },'loc');
            this.loc = this.opts.loc;
            this.type = "point";
            this.onClick = this.opts.click;
            this.element = document.createElementNS('http://www.w3.org/2000/svg','circle');
            this.element.setAttributeNS(null,"cx",this.loc[0]);
            this.element.setAttributeNS(null,"cy",this.loc[1]);
            this.element.setAttributeNS(null,"r",this.opts.r);
            this.element.setAttributeNS(null,"stroke",this.opts.stroke);
            this.element.setAttributeNS(null,"stroke-width",this.opts.strokeWidth);
            this.element.setAttributeNS(null,"fill",this.opts.fill);
            //注册关于元素的动画
            this.animation = function(animation){
                this.element.appendChild(animation.toElement());
            };
            //双击点的位置显示点到最中间的位置并展示描述
            //document.addEventListener("click"
            this.element.addEventListener("click",function(e){
                ths.onClick&&ths.onClick(e);
                if(e.stopPropagation){
                    e.stopPropagation();
                }else if(window.event) {
                    window.event.cancelBubble = true;
                }
            });
            //输出元素信息
            this.toElement = function(){
                return this.element;
            }
            this.show = function(){
                map.map.append(this.toElement());
            }
            map.library.point.push(this);
        }


        //根据输入的坐标的x,y进行一个展示
        this.showLoc = function(x,y){
            ths.x = ths.w_w / 2 - x / ths.scale ;
            ths.y = ths.w_h / 2 - y / ths.scale ;
            ths.syncPosition();//重置位置信息
        }

        //点击获取当前的鼠标位置的方法
        this.click = function(evt){

            if(typeof(evt)=='function'){
                this.library.clicklist.push(evt);
            }else{
                for(var i =0;i<this.library.clicklist.length;i++){
                    this.library.clicklist[i](evt);
                }
            }
            //document.addEventListener("click"
        }
        a.kuoqiJs(document).ready(function(){
            map.sync();
            map.ready();
        });
        this.library = {readlist:[],point:[],clicklist:[]};
        this.ready = function(evt){
            if(typeof(evt)=='function'){
                this.library.readlist.push(evt);
            }else{
                for(var i =0;i<this.library.readlist.length;i++){
                    this.library.readlist[i](evt);
                }
            }
        }
    }
    a.kuoqiJs.plugIn.register('Map',kuoqimap);
})(this))